<template>
  姓：<input type="" name="" v-model="person.firstName" /><br /><br />
  名：<input type="" name="" v-model="person.lastName" /><br /><br />
  总：<input type="" name="" v-model="person.fullName" /><br /><br />
  <span>{{ person.fullName }}</span>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 计算属性简写（只读）
    // person.fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });

    // 计算属性-完整
    person.fullName = computed({
      get (){
        // 读取
        return person.firstName + "-" + person.lastName;
      },
      set(value){
        //计算
        let arr = value.split('-');
        console.log('arr :>> ', arr);
        person.firstName = arr[0];
        person.lastName = arr[1];
      }
    })

    return {
      person,
    };
  },
};
</script>
